import React, {useState, useEffect} from "react";
import {
    Badge,
    Button,
    Card,
    Col,
    Divider,
    Empty,
    Image, Popconfirm,
    Row,
    Spin,
} from "antd";
import Title from "antd/es/typography/Title";
import {
    DeleteOutlined,
    DownloadOutlined,
    SettingOutlined,
} from "@ant-design/icons";
import axios from "axios";
import Meta from "antd/es/card/Meta";
import {Link} from "react-router-dom";
import {Content} from "antd/es/layout/layout";

function getFillBackImg(): string {
    return ''
}

const CoreIndex: React.FC = () => {
    const [loading, setLoading] = useState<boolean>(true);
    const [plugins, setPlugins] = useState<any[]>([]);
    const [version, setVersion] = useState<string>("");
    const [pluginCenter, setPluginCenter] = useState<string>("");

    const load = () => {
        axios.get("api/plugins").then((e) => {
            setPlugins(e.data.plugins);
            setVersion("v" + e.data.pluginVersion);
            setPluginCenter(e.data.pluginCenter);
            setLoading(false);
        });
    };

    const deletePlugin = (pluginName: string) => {
        axios.get("api/uninstall?name=" + pluginName).then(() => {
            load();
        });
    };

    useEffect(() => {
        load();
    }, []);

    return (
        <Spin spinning={loading} style={{height: "100vh"}}>
            <Content hidden={loading} style={{height: "100vh"}}>
                <Title className="page-header" level={3}>
                    插件管理 <span style={{fontSize: 16}}>({version})</span>
                </Title>
                <Divider/>
                {plugins.length === 0 && <Empty description="空空如也">
                    <a href={pluginCenter}>
                        <Button type="primary">
                            <DownloadOutlined/>去下载
                        </Button>
                    </a>
                </Empty>}
                <div hidden={plugins.length === 0}>
                    <Row gutter={[4, 4]} style={{margin: 4}}>
                        {plugins.map((plugin) => {
                            return (
                                <Col md={6} xxl={4} xs={24} key={plugin.shortName}>
                                    <Badge.Ribbon
                                        text={
                                            plugin.use
                                                ? "admin.theme.inUse"
                                                : plugin.preview
                                                    ? "admin.theme.inPreview"
                                                    : ""
                                        }
                                        style={{
                                            fontSize: 16,
                                            display: plugin.use || plugin.preview ? "" : "none",
                                        }}
                                    >
                                        <Card
                                            cover={
                                                <Image
                                                    preview={false}
                                                    fallback={getFillBackImg()}
                                                    style={{width: "100%", minHeight: 300}}
                                                    alt={plugin.name}
                                                    src={plugin.previewImageBase64}
                                                />
                                            }
                                            actions={[
                                                <a href={plugin.shortName + "/"}>
                                                    <SettingOutlined key="preview"/>
                                                </a>,
                                                <Popconfirm
                                                    title={`确定删除插件《${plugin.name}》吗？`}
                                                    okText="确定"
                                                    onConfirm={() => {
                                                        deletePlugin(plugin.shortName)
                                                    }}
                                                    cancelText="取消"
                                                >
                                                    <Link to={"#"}>
                                                        <DeleteOutlined key="delete"/>
                                                    </Link>
                                                </Popconfirm>
                                            ]}
                                        >
                                            <Meta
                                                title={plugin.name + ` (` + plugin.version + ")"}
                                                description={plugin.desc}
                                            />
                                        </Card>
                                    </Badge.Ribbon>
                                </Col>
                            );
                        })}
                    </Row>
                    <Divider/>
                    <a href={pluginCenter} style={{paddingBottom: 32}}>
                        <Button type="primary">
                            <DownloadOutlined/> 下载
                        </Button>
                    </a>
                </div>
            </Content>
        </Spin>
    );
};

export default CoreIndex;